<template>
  <!-- 发货单-评论 -->
  <div class="comment">
    <!-- 顶部导航 -->
    <van-nav-bar left-arrow title="评分" @click-left="$router.go(-1)" />

    <!-- 信息栏 -->
    <van-notice-bar
      class="dindan"
      color="#039"
      background="#f4fbfe"
      left-icon="orders-o"
    >
      订单信息
    </van-notice-bar>

    <!-- 商品信息 -->
    <div class="xinxi">
      <ul>
        <li>
          <small>商品</small>
          <big class="van-ellipsis">{{ message.prodName }}</big>
        </li>
        <li>
          <small>发货时间</small>
          <big class="van-ellipsis">{{ message.sendTime }}</big>
        </li>
        <li>
          <small>到达时间</small>
          <big class="van-ellipsis">{{ message.receiveTime }}</big>
        </li>
      </ul>
    </div>

    <!-- 信息栏 -->
    <van-notice-bar
      class="dindan"
      color="#039"
      background="#f4fbfe"
      left-icon="orders-o"
    >
      服务评价
    </van-notice-bar>

    <!-- 评价信息 -->
    <div class="xinxi">
      <ul>
        <!-- 描述相符 -->
        <li>
          <van-row>
            <van-col span="5">描述相符</van-col>
            <van-col span="16">
              <van-rate
                v-model="val1"
                :size="25"
                color="#ffd15f"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="3">{{ val1 * 2 }}分</van-col>
          </van-row>
        </li>
        <!-- 物流速度 -->
        <li>
          <van-row>
            <van-col span="5">物流速度</van-col>
            <van-col span="16">
              <van-rate
                v-model="val2"
                :size="25"
                color="#fe8e5b"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="3">{{ val2 * 2 }}分</van-col>
          </van-row>
        </li>
        <!-- 服务质量 -->
        <li>
          <van-row>
            <van-col span="5">服务质量</van-col>
            <van-col span="16">
              <van-rate
                v-model="val3"
                :size="25"
                color="#fd5d5e"
                void-icon="star"
                void-color="#eee"
              />
            </van-col>
            <van-col span="3">{{ val3 * 2 }}分</van-col>
          </van-row>
        </li>
      </ul>
    </div>

    <!-- 输入框 -->
    <van-field
      class="shurk"
      v-model="value"
      rows="1"
      autosize
      type="textarea"
      placeholder="请填写评价"
    />

    <!-- 提交按钮 -->
    <div class="evaluate_btn">
      <van-button
        type="primary"
        size="large"
        round
        color="#039"
        @click="submitComments"
        >提交评论</van-button
      >
    </div>
  </div>
</template>

<script>
import { OrderToEvaluate } from "@/request/api";
export default {
  data() {
    return {
      // 接受数据
      message: [],

      // 描述相符
      val1: 5,
      // 物流速度
      val2: 3,
      // 服务质量
      val3: 2,

      // 评论
      value: "",
    };
  },
  created() {
    this.message = JSON.parse(this.$route.query.info);
    // console.log(this.message);
  },
  methods: {
    submitComments() {
      OrderToEvaluate({
        serialNo: this.message.serialNo,
        prodConformityPoint: this.val1,
        logisticsSpeedPoint: this.val2,
        serviceQualityPoint: this.val3,
        comment: this.value,
      }).then((res) => {
        // console.log(res);
        this.$toast.success("评论成功");
        setTimeout(() => {
          this.$router.push("/shipments");
        }, 1000);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.van-hairline--bottom {
  background-color: #003399;
}
/deep/.van-nav-bar__title,
/deep/.van-icon {
  color: #ffffff;
}
.xinxi {
  padding: 0.1rem 4%;
  background-color: #fff;
  margin-bottom: 0.2rem;
  h3 {
    line-height: 0.5rem;
  }
  li {
    border-radius: 0.05rem;
    line-height: 0.4rem;
    display: flex;
    justify-content: space-between;
    small {
      width: 20%;
      margin-right: 0.1rem;
      font-size: 0.12rem;
      color: #999;
    }
    big {
      flex: 1;
      font-size: 0.14rem;
      color: #666666;
    }
  }
}
.van-row {
  width: 100%;
}
/deep/.van-col {
  text-align: center;
}
.van-rate {
  vertical-align: middle;
}
.shurk {
  margin-top: 0.2rem;
  height: 2rem;
}
.evaluate_btn {
  background-color: #fff;
  margin-top: 0.2rem;
  padding: 0.1rem;
}
</style>